<!doctype html>
<html>
<head>
<p><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></p>
<script type="text/javascript" 
src="http://www.haghish.com/software/viz.js">
</script>
<!-- SYNTAX HIGHLIGHTING CLASSES  -->
<style type="text/css">
.author {display:block;text-align:center;font-size:16px;margin-bottom:3px;}
.date {display:block;text-align:center;font-size:12px;margin-bottom:3px;}
.center, #center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    -webkit-box-shadow: 0px 0px 2px rgba( 0, 0, 0, 0.5 );
    -moz-box-shadow: 0px 0px 2px rgba( 0, 0, 0, 0.5 );
    box-shadow: 0px 0px 2px rgba( 0, 0, 0, 0.5 );

    padding: 0px;
    border-width: 0px;
    border-style: solid;
    cursor:-webkit-zoom-in;
    cursor:-moz-zoom-in;
    }

pagebreak {
        page-break-before: always;
        }

.pagebreak, #pagebreak {
        page-break-before: always;
        }

td > p {padding:0; margin:0;}




header {
        font-size:28px;
        padding-bottom:5px; 
        margin:0;
        padding-top:150px; 
        font-family: ;
        background-color:white; 
        text-align:center;
        display:block;
        }

table {
        border-collapse: collapse;
        border-bottom:1px solid black;
        padding:5px;
        margin-top:5px;

}
.tble {
        display:block;
        margin-top: 10px;
        margin-bottom: 0px;
        margin-bottom: 0px;
}

.tblecenter {
        display:block;
        margin-top: 10px;
        margin-bottom: 0px;
        margin-bottom: 0px;
        text-align:center;
}

span.tblecenter + table, span.tble + table, span.tble + img {
        margin-top: 2px;
}

th {
border-bottom:1px solid black;
border-top:1px solid black;
padding-right:20px;
}

td {
padding-right:20px;
}

</style>
</head>
<body>
<h1 id="dynamic-software-visualization">Dynamic Software Visualization</h1>
<p>Writing software documentation and visualizing seletive information can boost active learning in students. It can also provide very useful information about structure of a software and encourages users to read the code and contribute to an open-source project. <strong>MarkDoc package</strong> supports the <strong><em>DOT</em></strong> (graph description language), and it can produce HTML documents with graphs, written within the source code or data analysis.</p>
<p>The graph can be written in different sections. However, MarkDoc has a separate syntax for beginning a new graph or continuing the previous graphs. to begin a new graph, use the regular syntax for wiriting documentation plus a double dollar sign and to continue using the current graph, use a single dollar sign. Here is an example:</p>
<script>
document.body.innerHTML += Viz(
          'digraph {' +
          'Hello -> World;' +
          '}'
);
</script>
<h2 id="continues-figures">Continues figures</h2>
<p>It's much easier to write a detailed graph in different section and update it, when there is a change in that section. Writing a detailed graph at once and within a single section makes it <em>less interesting</em> and makes it feel like <em>extra work</em> when the job is already done. However if the graph is developed gradually, as the program is written, it's more encouraging. For example, the graph below is written in two separate sections.</p>
<script>
document.body.innerHTML += Viz(
          'graph ER {' +
          'node [shape=box]; course; institute; student;' +
          'node [shape=ellipse]; {node [label="name"] name0; name1; name2;}' +
          'code; grade; number;' +
          'node [shape=diamond,style=filled,color=lightgrey]; "C-I"; "S-C"; "S-I";' +
          'name0 -- course;' +
          'code -- course;' +
          'course -- "C-I" [label="n",len=1.00];' +
          '"C-I" -- institute [label="1",len=1.00];' +
          'institute -- name1;' +
          'institute -- "S-I" [label="1",len=1.00];' +
          '"S-I" -- student [label="n",len=1.00];' +
          'student -- grade;' +
          'student -- name2;' +
          'student -- number;' +
          'student -- "S-C" [label="m",len=1.00];' +
          '"S-C" -- course [label="n",len=1.00];' +
          'label = "\n\nEntity Relation Diagram\ndrawn by NEATO";' +
          'fontsize=20;' +
          '}'
);
</script>
<h2 id="example-1">Example 1</h2>
<script>
document.body.innerHTML += Viz(
          'digraph {' +
          'subgraph cluster_0 {' +
          'label="Subgraph A";' +
          'a -> b;' +
          'b -> c;' +
          'c -> d;' +
          '}' +
          'subgraph cluster_1 {' +
          'label="Subgraph B";' +
          'a -> f;' +
          'f -> c;' +
          '}' +
          '}'
);
</script>
<h2 id="example-2">Example 2</h2>
<script>
document.body.innerHTML += Viz(
          'digraph {' +
          'a -> b[label="0.2",weight="0.2"];' +
          'a -> c[label="0.4",weight="0.4"];' +
          'c -> b[label="0.6",weight="0.6"];' +
          'c -> e[label="0.6",weight="0.6"];' +
          'e -> e[label="0.1",weight="0.1"];' +
          'e -> b[label="0.7",weight="0.7"];' +
          '}'
);
</script>
<h2 id="example-3">Example 3</h2>
<script>
document.body.innerHTML += Viz(
          'digraph G {' +
          'subgraph cluster_0 {' +
          'style=filled;' +
          'color=lightgrey;' +
          'node [style=filled,color=white];' +
          'a0 -> a1 -> a2 -> a3;' +
          'label = "process #1";' +
          '}' +
          'subgraph cluster_1 {' +
          'node [style=filled];' +
          'b0 -> b1 -> b2 -> b3;' +
          'label = "process #2";' +
          'color=blue' +
          '}' +
          'start -> a0;' +
          'start -> b0;' +
          'a1 -> b3;' +
          'b2 -> a3;' +
          'a3 -> a0;' +
          'a3 -> end;' +
          'b3 -> end;' +
          'start [shape=Mdiamond];' +
          'end [shape=Msquare];' +
          '}'
);
</script>
</body>
</html>
